import { useTitle } from 'ahooks'
import { Button, ErrorBlock, Form, Radio, SearchBar } from 'antd-mobile'
import React, { useEffect, useRef, useState } from 'react'
import Style from './Components/InvoiceTitle.less'
import edit from '../Invoice/Components/edit.svg'
import defaultPic from '../Invoice/Components/defaultPic.svg'
import { history } from 'umi'
import { QueryCollectTickets, modifyTheDefault } from '@/services/Title'
import list from '../list'

export default function InvoiceTitle() {
   let temp = useTitle('收票抬头')
   const [defaultTitle, setDefaultTitle] = useState<string | null>()
   const [Titles, setTitles] = useState([])
   const [values,setValues]=useState<string|null>()

   const Search = (data: string) => {
      console.log(data)
      setValues(data)
   }
   const onChange = async(id: string) => {
      console.log('onchange', id);
      const res = await modifyTheDefault(id)
      console.log(res);
      // setDefaultTitle(id)
      // window.location.reload();
      
      // Titles?.map((item, index) => {
      //    if (item.taxId === data) {
      //       item.isDefault = true
      //    } else {
      //       item.isDefault = false
      //    }
      // })
      // setDefaultTitle(data)
   }
   
   const handleAddOrEdit = (data: any) => {
      history.push(
         '/Invoice/titleAddOrUpdate',
         {
            data: data ?? '',
         }
      )
   }

   const getData = async () => {
      const value = {
         enterprise:values,
         taxId: values,
         userId: 1,
      }
      const res = await QueryCollectTickets(value);
      if(res?.length!=undefined){
         setTitles(res)
      }
      console.log(res);
      
   }

   useEffect(() => {
      getData()
   }, [values,defaultTitle])

   return (<>
      <div className={Style.style_div1_search}>
         <SearchBar
            onSearch={Search}
            placeholder='搜索'
            showCancelButton
            style={{
               '--border-radius': '100px',
               '--background': 'rgba(245, 245, 245, 1)',
               '--height': '32px',
               padding: "10px"
            }} />
      </div>
      <div className={Style.styles}>
         <div className={Style.style_div2}>
            {/* <Radio.Group onChange={onChange} > */}
               {Titles.length != 0 ? Titles?.map((item, index) => {
                  return (
                     <div className={Style.style_div2_list} key={index}>
                        <div className={Style.style_div2_top} onClick={() => handleAddOrEdit(item)}>
                           <div >
                              <div style={{ display: "flex", justifyContent: "flex-start", alignItems: "center" }}>
                                 <div className={Style.style_div2_titleName}>{item.enterprise}</div>
                                 <div>
                                    {item.defaultStatus == 'true' ? <img src={defaultPic} style={{ width: "34px", height: "19px", paddingTop: "5px" }} alt="" /> : ''}
                                 </div>
                              </div>

                              <div className={Style.style_div2_taxNumber}>纳税人识别号：{item.taxId}</div>
                           </div>
                           <img style={{ width: "16px", height: "16px", paddingRight: "30px" }} src={edit} alt="" />
                        </div>
                        <hr className={Style.style_hr} />
                        {item.defaultStatus==='true'?
                        <Radio checked style={{ paddingLeft: "10px", fontSize: "13px" }} value={item.taxId}>设为默认抬头</Radio>:
                        <Radio onChange={()=>onChange(item.taxId)} style={{ paddingLeft: "10px", fontSize: "13px" }} value={item.taxId}>设为默认抬头</Radio>}
                     </div>
                  )
               })
                  :
                  <ErrorBlock status='empty' />
               }
            {/* </Radio.Group> */}
         </div>
         <div className={Style.style_button}>
            <Button color="primary" block size='large' onClick={handleAddOrEdit}
               style={{ backgroundColor: '#21B47C', "margin": "6px 20px 6px 20px" }}>新增抬头</Button>
         </div>
      </div>
      <div style={{ height: "60px" }}> </div>
   </>
   )
}
